<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressPackageLang.add_package')"
      :visible.sync="Visible"
      width="70%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.weight')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  ref="weight" 
                  @blur="handleBlur('weight', $event)" 
                  @focus="handleFocus($event)" 
                  @change="setDensity"
                  :min="0" 
                  :precision="4"
                  v-model="data.weight">
                </el-input-number>
              </div>
            </div>
            <div style="width:12.33%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.long')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="setVolume"
                  :min="0" 
                  :precision="2"
                  v-model="data.length">
                </el-input-number>
              </div>
            </div>
            <div style="width:12.33%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.wide')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="setVolume"
                  :min="0" 
                  :precision="2"
                  v-model="data.width">
                </el-input-number>
              </div>
            </div>
            <div style="width:12.33%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.high')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  @change="setVolume"
                  :min="0" 
                  :precision="2"
                  v-model="data.height">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.volume')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  ref="volume" 
                  @blur="handleBlur('volume', $event)" 
                  @focus="handleFocus($event)" 
                  @change="setDensity"
                  :min="0" 
                  :precision="5"
                  v-model="data.volume">
                </el-input-number>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.density')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.density">
                </el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width:29%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.goods_name')}}:
              </div>
              <div class="contant">
                <el-input
                  ref="goods_name"
                  @blur="handleBlur('goods_name',$event)"
                  @focus="handleFocus($event)"
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.goods_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.quantity_num')}}:
              </div>
              <div class="contant">
                <el-input-number
                  controls-position="right"
                  size="small" 
                  :min="0" 
                  :precision="0"
                  v-model="data.quantity_num">
                </el-input-number>
              </div>
            </div>
            <div style="width:29%" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.model_num')}}:
              </div>
              <div class="contant">
                <el-input
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.style_num"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.packing_method')}}:
              </div>
              <div class="contant">
                <el-select
                  filterable
                  v-model="data.packing_method"
                  :placeholder="$t('common.select_plactholder')"
                >
                  <el-option
                    v-for="item in options_packing"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width:29%" class="dialogBoxItemRow">
              <div class="title">
                <div class="RequiredRowTip">*</div>
                {{$t('ExpressDeliveryManagementLang.Shipper')}}:
              </div>
              <div class="contant">
                <Loadselect
                  ref="uid"
                  :select_value="'uid'"
                  :select_label="'nickname'"
                  :modalName="'uid'"
                  :select_model="data.uid"
                  :select_options="options_customer"
                  @selectBlur="selectBlur('uid')"
                  @selectChang="LoadselectChange"
                  :isLazy="true"
                  @loadData="loadData"
                  @filterDataFun="filterDataFun"
                >
                </Loadselect>
              </div>
            </div>
            <div style="width:70%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.remarks')}}:
              </div>
              <div class="contant">
                <el-input
                  :placeholder="$t('common.input_plactholder')"
                  v-model="data.remark"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      data:{
        start_local:'',
        weight:'',
        length:'',
        width:'',
        height:'',
        volume:'',
        density:'',
        goods_name:'',
        quantity_num:'',
        style_num:'',
        packing_method:'',
        uid:'',
        remark:'',
      },
      loadSelectPageInfo:{
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      },
      options_customer:[],
      options_packing:[],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(start_local) {
      this.data.start_local=start_local
      this.getOptions()
      this.Visible = true;
    },
    //获取下拉单数据
    getOptions(){
      //获取客户列表
      this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
      this.$get("orderSysItems").then((res) => {
        this.options_packing = res.data.pack_method;
      });
    },
    loadData(){
      if(this.loadSelectPageInfo.page<this.loadSelectPageInfo.page_all){
        this.loadSelectPageInfo.page++
        this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
          this.options_customer.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.loadSelectPageInfo.page=1
      this.loadSelectPageInfo.keyword=value
      this.$get("screenChilds",{parallel_account:1,name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.options_customer = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    //自定义多选下拉框
    selectBlur(name){
      console.log(333333)
      this.loadSelectPageInfo={
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      }
      this.getOptions()
      if (this.data[name] === ""||!this.data[name]&&this.data[name]!==0) {
        this.$refs[name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
      }
    },
    LoadselectChange(obj){
      this.data[obj.name]=obj.value
      if (this.data[obj.name].length===0) {
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[obj.name].$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    setVolume(){
      if(this.data.length>0&&this.data.width>0&&this.data.height>0){
        this.data.volume=this.$computing(Number(this.data.length)*Number(this.data.width)*Number(this.data.height)/1000000,'fixed',5)
      }else{
        this.data.volume=0
      }
      if(this.data.volume<0.00001){
        this.data.volume=0.00001
      }
      this.setDensity()
    },
    setDensity(){
      if(this.data.volume>0&&this.data.weight>0){
          this.data.density=this.$computing(Number(this.data.weight)/Number(this.data.volume),'fixed',2)
        }else{
          this.data.density=0
        }
    },
    // 提交修改
    confirm() {
      let type=true
      if(!this.data.weight){
        this.$refs.weight.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.volume){
        this.$refs.volume.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.goods_name){
        this.$refs.goods_name.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (!this.data.uid&&this.data.uid!==0) {
        this.$refs.uid.$el.childNodes[0].childNodes[1].childNodes[1].style.border ="1px solid red";
        type = false;
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        params.append("start_local", this.data.start_local);
        params.append("weight", this.data.weight);
        params.append("length", this.data.length);
        params.append("width", this.data.width);
        params.append("height", this.data.height);
        params.append("volume", this.data.volume);
        params.append("density", this.data.density);
        params.append("goods_name", this.data.goods_name);
        params.append("quantity_num", this.data.quantity_num);
        params.append("style_num", this.data.style_num);
        params.append("packing_method", this.data.packing_method);
        params.append("uid", this.data.uid);
        params.append("remark", this.data.remark);

        this.$postForm("addPackage", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    //取消修改
    cancel() {
      this.data={
        weight:'',
        length:'',
        width:'',
        height:'',
        volume:'',
        density:'',
        goods_name:'',
        quantity_num:'',
        style_num:'',
        packing_method:'',
        uid:'',
        remark:'',
      }
      this.Visible = false;
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 19%;
    }
  }
</style>